<template>
    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home-o" @click="changeRouter('/Home')">首页</van-tabbar-item>
        <van-tabbar-item icon="orders-o" @click="changeRouter('/Classify')">分类</van-tabbar-item>
        <van-tabbar-item icon="cashier-o" @click="changeRouter('/Buying')">值得买</van-tabbar-item>
        <van-tabbar-item icon="cart-o" @click="changeRouter('/Cart')">购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o" @click="changeRouter('/Person')">个人</van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

/* -------------------------------基础数据----------------------------------- */
// vant组件tapbar类型
const active = ref('home');

//  编程式路由导航
const router = useRouter()





/* -------------------------------回调函数----------------------------------- */
 
// 点击切换路由路径的回调

const changeRouter = (rou:string) =>{
    router.push(rou)
}




</script>

<style scoped>
.h {
    width: 100px;
    height: 100px;
}
</style>